<template>
  <el-menu
    class="home_menu"
    :default-active="'/index'"
    router
    mode="horizontal"
    background-color="white"
    text-color="#222"
    active-text-color="red"
    >
    <el-menu-item v-for="(item,i) in navList" :key="i" :index="item.name">
      {{ item.navItem }}
    </el-menu-item>
    <a v-bind:href="url" style="color: #222;float: right;padding: 20px;">{{username}}</a>
    <i class="el-icon-menu" style="float:right;font-size: 45px;color: #222;padding-top: 8px"></i>
    <span style="position: absolute;padding-top: 20px;right: 43%;font-size: 20px;font-weight: bold"></span>
  </el-menu>
</template>

<script>
export default {
  name: 'NavMenu',
  data () {
    return {
      navList: [
        {name: '/index', navItem: '首页'},
        {name: '/jotter', navItem: '笔记本'},
        {name: '/library', navItem: '图书馆'},
        {name: '/admin', navItem: '个人中心'}
      ],
      username: window.localStorage.getItem('user' || '[]') == null ? '登录' : JSON.parse(window.localStorage.getItem('user' || '[]')).username,
      url: window.localStorage.getItem('user' || '[]') == null ? '/login' : '/admin'
    }
  }
}
</script>

<style scoped>
  a{
    text-decoration: none;
  }

  span {
    pointer-events: none;
  }
  .home_menu {
    min-width: 1300px;
    position: sticky;
    position: -webkit-sticky;
    top: 0px;
    z-index:99999;
    padding-left: 130px;
  }
</style>
